<template>
    <!-- 首页3D柱形统计图 -->
    <div id="linechart2" ref="home3" style="width: 100%; height: 100%" />
</template>
<script>
import * as echarts from 'echarts';
import { getWarnStatistics} from "@/api/system/info";

export default {
    data(){
        return{
            warnStatistics:{
                unHandledCount:0, //未处理警告
                handledCount:0, //已处理警告
                totalCount:0 //总处理警告
            }
        }
    },
    mounted() {
        let that = this;
        setTimeout(function () {
            that.initChart3();
        }, 0)
    },
    methods: {
        initChart3() {
            let that = this;
            getWarnStatistics().then(res=>{
                if(res.code==200){
                    that.warnStatistics=res.data;
                    that.drawChart();
                }
            })
        },
        drawChart() {
            let linechart2 = echarts.init(this.$refs.home3);
            window.addEventListener("resize", () => {
                linechart2.resize();
            });
            
            const option = {
                title: {
                    text: '警告统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['警告数量'],
                    bottom: 0
                },
                xAxis: {
                    type: 'category',
                    data: ['未处理警告', '已处理警告', '总警告数'],
                    axisLabel: {
                        color: '#fff'
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '警告数量',
                    type: 'bar',
                    barWidth: '30%',
                    data: [
                        this.warnStatistics.unHandledCount,
                        this.warnStatistics.handledCount,
                        this.warnStatistics.totalCount
                    ],
                    itemStyle: {
                        color: function(params) {
                            const colorList = ['#FF9F7F', '#37A2DA', '#32C5E9'];
                            return colorList[params.dataIndex];
                        }
                    }
                }]
            };
            
            linechart2.setOption(option);
        }
    }
};
</script>
